<script setup>
import { useRouter, RouterView } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import { testpostform } from '@api/common';

import { getCurrentInstance, ref } from 'vue';

const checked = ref(true);
const router = useRouter();
const counterStore = useCounterStore();
// const { proxy } = getCurrentInstance()

const goPage = (name) => {
  if (name === 'Home') {
    router.push('/');
  } else {
    router.push('/about');
  }
};

const sendAPI = () => {
  testpostform({ a: 1, b: 2 });
};
</script>

<template>
  <div class="app-base">
    <div class="wrapper">
      {{ counterStore.count }}
      <div class="count">{{ counterStore.doubleCount }}</div>
      <button @click="() => counterStore.count++">++</button>
      <img src="@/assets/images/auth.png" alt="" />
      <div class="img2"></div>
      <div @click="goPage('Home')">Home</div>
      <div @click="goPage('About')">About</div>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="success" @click="sendAPI()">ceshi api</van-button>
      <van-checkbox v-model="checked">复选框</van-checkbox>
      <!-- <RouterLink to="/">Home</RouterLink>
        <br>
        <RouterLink to="/about">About</RouterLink> -->
    </div>
    <RouterView />
  </div>
</template>

<style lang="less">
.app-base {
  font-size: 14px;
}
.count {
  font-size: 18px;
  width: 375px;
  color: @primary-color;
}
.img2 {
  width: 200px;
  height: 200px;
  background-image: url('@/assets/images/auth.png');
}
</style>
